<template>
  <div class="oll" :style="getBoxStyle">
    <div v-for="(x, y) in newCode(code)" :key="y" @click="selectPart(y)">
      <div v-if="x == 1" class="active"></div>
      <div v-else></div>
    </div>
  </div>
</template>
<script setup>
import { computed, defineEmits } from 'vue'

const props = defineProps({
  diameter: {
    type: String,
    defalut: []
  },
  code: {
    type: String,
    defalut: []
  }
})

const getBoxStyle = computed(() => {
  return {
    width: props.diameter + 'px',
    height: props.diameter + 'px'
  }
})
function newCode() {
  let arr = []
  for (let i = 1; i <= 25; i++) {
    arr.push(0)
  }
  props.code.split(',').map(x => {
    arr[x] = 1
  })
  return arr
}

const emit = defineEmits(['selectPart'])
function selectPart(y) {
  emit('selectPart', y)
}
</script>
<style scoped lang="scss">
.oll {
  display: flex;
  flex-wrap: wrap;

  >div {
    width: 20%;
    height: 20%;
    position: relative;

    >div {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      cursor: pointer;
    }
  }

  >div:nth-child(2),
  >div:nth-child(3),
  >div:nth-child(4) {
    >div {
      height: 4px;
      width: 80%;
      left: 10%;
      bottom: 4px;
    }
  }

  >div:nth-child(6),
  >div:nth-child(11),
  >div:nth-child(16) {
    >div {
      width: 4px;
      right: 4px;
      height: 80%;
      top: 10%;
    }
  }

  >div:nth-child(10),
  >div:nth-child(15),
  >div:nth-child(20) {
    >div {
      width: 4px;
      left: 4px;
      height: 80%;
      top: 10%;
    }
  }

  >div:nth-child(22),
  >div:nth-child(23),
  >div:nth-child(24) {
    >div {
      width: 80%;
      left: 10%;
      height: 4px;
      top: 4px;
    }
  }

  >div:nth-child(7),
  >div:nth-child(9),
  >div:nth-child(17),
  >div:nth-child(19){
    border: 1px solid #000;
  }


  >div:nth-child(8),
  >div:nth-child(18){
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }

  >div:nth-child(12),
  >div:nth-child(14){
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }

  .active {
    background-color: red;
  }
}
</style>
